import React, { useEffect, useState } from 'react'
import { PageHeader } from '@ant-design/pro-layout';
import { Descriptions, message } from 'antd';
import previewStyle from './css/NewsPreview.less';
import { connect, history, useParams } from 'umi';
import moment from 'moment';
import axios from 'axios';
import { useRequest } from 'ahooks';

interface IStateObj {
    [key: string]: string
}
// 发起网络请求，通过提交的信息去验证用户名和密码以及状态的验证
const getCurrentNewsRequest = (id: string|number|undefined) => {
    return axios.get(`http://localhost:3000/news/${id}?_expand=category&_expand=role`)
}
function NewsPreview(props: any) {
    const { currentNewsData } = props;
    const [currentNews, setCurrentNews] = useState<any>(null)
    const { id } = useParams();
    const auditStateObj: IStateObj = {
        '0': '未审核',
        '1': '审核中',
        '2': '已通过',
        '3': '未通过'
    };
    const publishStateObj: IStateObj = {
        '0': '未发布',
        '1': '待发布',
        '2': '已上线',
        '3': '已下线'
    };
    const textColorObj: IStateObj = {
        '0': 'black',
        '1': 'orange',
        '2': 'green',
        '3': 'red'
    };
    // useRequest初使用
    const { run: getCurrentNewsData, loading } = useRequest(getCurrentNewsRequest, {
        throttleWait: 300,
        manual: true,
        onSuccess: (result: any, params) => {
            if (result.status === 200) {
                setCurrentNews(result.data);
            }
        },
        onError(e, params) {
            message.warning('请求新闻数据失败')
        },
    })
    useEffect(() => {
        getCurrentNewsData(id)
    }, [id])
    return (
        <>
            <div className={previewStyle["site-page-header-ghost-wrapper"]}>
                <PageHeader
                    ghost={false}
                    onBack={() => history.back()}
                    title={currentNews?.title}
                    subTitle={currentNews?.category?.title}
                >
                    <Descriptions size="small" column={3}>
                        <Descriptions.Item label="创建者">{currentNews?.author}</Descriptions.Item>
                        <Descriptions.Item label="创建时间">
                            {currentNews?.createTime && moment(currentNews.createTime).format('YYYY/MM/DD HH:mm:ss')}
                        </Descriptions.Item>
                        <Descriptions.Item label="发布时间">
                            {currentNews?.publishTime ? moment(currentNews.createTime).format('YYYY/MM/DD HH:mm:ss') : '暂未发布'}
                        </Descriptions.Item>
                        <Descriptions.Item label="区域">{currentNews?.region ? currentNews.region : '全球'}</Descriptions.Item>
                        <Descriptions.Item label="审核状态" contentStyle={{ 'color': textColorObj[currentNews?.auditState] }}>{auditStateObj[currentNews?.auditState]}</Descriptions.Item>
                        <Descriptions.Item label="发布状态" ><span style={{ 'color': textColorObj[currentNews?.publishState] }}>{publishStateObj[currentNews?.publishState]}</span></Descriptions.Item>
                        <Descriptions.Item label="访问数量" ><span style={{ 'color': 'green' }}>{currentNews?.view}</span></Descriptions.Item>
                        <Descriptions.Item label="点赞数量" ><span style={{ 'color': 'green' }}>{currentNews?.star}</span></Descriptions.Item>
                        <Descriptions.Item label="评论数量" ><span style={{ 'color': 'green' }}>0</span></Descriptions.Item>
                    </Descriptions>
                </PageHeader>
            </div>
            <div dangerouslySetInnerHTML={{__html:currentNews?.content}} 
            className={previewStyle['content']}>
            </div>
        </>
    )
}
const mapStateToProps = (state: any) => {
    return {
        currentNewsData: state.StandBox.currentNewsData
    }
}
export default connect(mapStateToProps)(NewsPreview)
